* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 20% 66% 14%;
    background: #f2f2f2;
}

main {
    display: grid;
    grid-template-columns: 18% 64% 18%;
    grid-template-areas: "tools main pda";
    /* The tool and pda widgets rely on grid-template-areas to name 'tools' and 'pda', do not modify them. */

    & .hub-feed{
        grid-area: main;
        display: grid;
        grid-template-rows: 30px auto;

        & .news-header{
            display: grid;
            grid-template-columns: 1fr 1fr;
            
            & a{
                justify-self: end;
                align-self: center;
                text-decoration: none;
                color: white;
                background: #00008b;
                padding: 2px 8px;
                border-radius: 6px;
            }
            & a:hover {
                background: #3232ac;
            }

            & a:active {
                background: #030361;
            }
        }

        & .news-list{
            display: grid;
            grid-template-rows: repeat(9, 1fr);
            height: 550px;
            width: 1125px;
            place-self: center;
            list-style: none;

            & li{
                height: 90%;
                width: 98%;
                display: grid;
                place-self: center;
                align-items: center;

                & .nl-link-wrapper{
                    text-decoration: none;
                    padding: 5px 10px;
                    color: white;
                    background: linear-gradient(#95afd0, #4f79b0, #2f496a);
                    border-radius: 10px;
                    user-select: none;

                    & .nl-header{
                        display: grid;
                        grid-template-columns: 1fr 1fr;

                        & h4{ justify-self: end; }
                    }
                }

                & .nl-link-wrapper:hover{ background: linear-gradient(#b9c9df, #7294c0, #3f618d); cursor: pointer; }
                & .nl-link-wrapper:active{ background: linear-gradient(#7294c0, #3f618d, #203046); }
            }
        }
    }
}